﻿<template>
  <div>
    <el-tabs type="card" @tab-click="changeTab">
      <el-tab-pane label="未完成" >
        <el-table key="todoListTable" v-loading="isLoading" :data="todoDataList"
                  element-loading-text="正在加载..."
                               @row-click="handleClickRow"
                               tooltip-effect="dark" style="width: 100%">
          <el-table-column key="index" align="center" label="序号" type="index" width="55"></el-table-column>
          <el-table-column prop="name" header-align="center" align="left"  show-overflow-tooltip label="实例名称" ></el-table-column>
          <el-table-column prop="processDefinitionKey"  align="center"  show-overflow-tooltip label="流程KEY" ></el-table-column>
          <el-table-column prop="processDefinitionName" align="center"  show-overflow-tooltip label="流程名称" ></el-table-column>
          <el-table-column prop="dataId" align="center" label="关联数据ID" ></el-table-column>
          <el-table-column prop="createUser" align="center" width="200" label="发起人" ></el-table-column>
<!--          <el-table-column prop="createUser" align="center"  show-overflow-tooltip label="发送人"></el-table-column>-->
          <el-table-column prop="createTime" align="center" width="180"  show-overflow-tooltip label="发起时间"></el-table-column>
          <el-table-column column-key="'pre_option'" width="200" align="center" label="操作" >
            <template slot-scope="scope">
<!--              <el-button v-if="scope.row.assignee == undefined || scope.row.assignee =='' "-->
<!--                        @click="claim(scope.row.id)" type="text">【签收任务】</el-button>-->
              <el-button @click="openPage('/system/process/info',scope.row.id,{procDefId:scope.row.processDefinitionId})" type="text">详情</el-button>
              <el-button @click="openStopInstanceDlg(scope.row)" type="text">作废</el-button>
<!--              <el-button @click="openPage('/todo/info',scope.row.procInstId,{procDefId:scope.row.procDefId})" type="text">详情</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-if="total>1" style="text-align:center;padding-top:10px;" @current-change="loadDataList"
           background layout="prev, pager, next" :total="total"> </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="已完成" >
        <el-table key="todoListTable" v-loading="isLoading" :data="doneTodoDataList"
                  element-loading-text="正在加载..."
                  @row-click="handleClickRow"
                  tooltip-effect="dark" style="width: 100%">
          <el-table-column key="index" align="center" label="序号" type="index" width="55"></el-table-column>
          <el-table-column prop="name" header-align="center" align="left"  show-overflow-tooltip label="实例名称" ></el-table-column>
          <el-table-column prop="processDefinitionKey"  align="center"  show-overflow-tooltip label="流程KEY" ></el-table-column>
          <el-table-column prop="processDefinitionName" align="center"  show-overflow-tooltip label="流程名称" ></el-table-column>
          <el-table-column prop="createTime" align="center" width="180"  show-overflow-tooltip label="发起时间"></el-table-column>
          <el-table-column prop="endTime" align="center" width="180"  show-overflow-tooltip label="结束时间"></el-table-column>
          <el-table-column prop="deleteReason" align="center" width="180"  show-overflow-tooltip label="结束原因"></el-table-column>
          <el-table-column column-key="'pre_option'" width="200" align="center" label="操作" >
            <template slot-scope="scope">
              <el-button @click="deleteInstance(scope.row.id)" type="text">删除</el-button>
<!--              <el-button @click="openPage('/todo/info',scope.row.procInstId,{procDefId:scope.row.procDefId})" type="text">详情</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center;padding-top:10px;" background layout="prev, pager, next"
                       @current-change="loadDataList"
                       :total="total">
        </el-pagination>
       <!-- <el-pagination  style="text-align:center;padding-top:10px;" background layout="prev, pager, next" :total="1000" ></el-pagination>-->
        </el-tab-pane>
    </el-tabs>
    <el-dialog title="作废原因" :visible.sync="stopDlgVisible" :close-on-click-modal="false" width="50%">
      <el-form label-width="auto">
        <el-form-item label="实例名称">
          {{targetData.name}}
        </el-form-item>

      </el-form>
      <el-input v-model="reason" type="textarea" autocomplete="off" :rows="5" />
      <div slot="footer" class="dialog-footer" >
        <el-button v-loading="isLoading"  @click="stopInstance">作废</el-button>
        <el-button  @click="stopDlgVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "ProcessInstanceList",
  data() {
    return {
        isLoading:false,
      type: "todo",
      queryCondition: {},
      companyList: [],
      typeList: [],
      levelList: [],
      stopDlgVisible:false,
      todoDataList: [],
      doneTodoDataList: [],
      pageSize:10,
      currentPage:1,
      total:0,
        detailLoading:false,
        detailList:[],
        reason:null,
        targetData:{},
    };
  },
  computed: {},
  created: function() {
    if (this.$route.params.type && this.$route.params.type.length > 0) {
      this.type = this.$route.params.type;
    }
    this.loadDataList();
  },
    mounted(){
      this.$emit('add-bread', { name: '事务列表' ,parent:this.$route.query.parent})
    },
  watch: {
    $route(to, from) {
      this.type = to.params.type;
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize= val;
      this.loadDataList();
    },
    handleCurrentChange(val) {
      this.currentPage= val;
      this.loadDataList();
    },
    loadDataList: function(pageNo) {
      this.isLoading = true;
      const message = this.$message;
      let url = '/task/instance/data';
      // if (this.type === 'done') {
      //    url = '/task/history/data';
      // }
      // let params = new URLSearchParams();
      // params.append("pageSize", this.pageSize);
      if(pageNo) {
          this.currentPage = pageNo;
      }
        // params.append("pageNo", this.currentPage);
      this.$get(url,{pageSize:this.pageSize,pageNo:this.currentPage,type:this.type},data => {
          let list = [];
          if(this.type==='done'){
            this.doneTodoDataList= data.data;
          } else {
            this.todoDataList= data.data;
          }
           this.total =data.total;//获取总页数
      },()=>{
          this.isLoading = false;
      });
    },

      stopInstance: function() {//签收
      let params = new URLSearchParams();
      params.append("instanceId", this.targetData.id);
      params.append("reason", this.reason);
      this.$post('/task/instance/stop', params,response => {
            this.$message({
              message: '作废成功',
              type: 'success'
            });
            this.targetData = {};
          this.loadDataList()
      });

    },
      deleteInstance: function(id) {
      let params = new URLSearchParams();
      params.append("instanceId", id);
      this.$post('/task/instance/delete', params,response => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          this.loadDataList()
      });

    },
      openStopInstanceDlg: function(item) {
          this.stopDlgVisible=true;
          this.targetData = item;
    },

      handleClickRow(row,column,event) {
          // if(this.type=='query') {
          //     //项目库 提出项目审核
          //     this.openPage("/area/plan/audit_sign",row.id,{type:'view'})
          // }
      },

      changeTab(data) { //标签页切换
        this.pageSize =10;
        this.currentPage =1;
        if(data.label=='已完成') {
            this.type = 'done';
        } else if(data.label == '未完成') {
          this.type = 'todo';
        }
        this.loadDataList();
      },

  }
};
</script>
